<template>
  <view class="SubjectRule">
    <!--在线练习 抽题-->
    <view class="step-form modal">
      <u--form labelPosition="left" :required="true" :model="jsonData" ref="uForm">
        <u-form-item label="抽题方式" borderBottom required @click="extractionShow = true; hideKeyboard()" ref="item1">
          <u--input v-model="jsonData.extractionTypeLabel" disabled disabledColor="#ffffff" placeholder="请选择"
            border="none"></u--input>
          <u-icon slot="right" name="arrow-right"></u-icon>
        </u-form-item>
        <u-form-item label="试题类型" borderBottom required @click="topicTypeShow = true; hideKeyboard()" ref="item1"
          v-if="subType === 2">
          <u--input v-model="jsonData.topicTypeLabel" disabled disabledColor="#ffffff" placeholder="请选择"
            border="none"></u--input>
          <u-icon slot="right" name="arrow-right"></u-icon>
        </u-form-item>
        <u-form-item label="抽题比列" required :borderBottom="subType !== 1">
          <view class="flex flex-row flex-end item-center score">
            <u--input v-model="jsonData.amountStr" border="none" @change="scoreChange" />
            <view v-if="jsonData.extractionType === 1">%</view>
            <view v-if="jsonData.extractionType === 2">道</view>
          </view>
        </u-form-item>
      </u--form>
    </view>
    <view class="line" style="height: 3px" v-if="subType === 2"></view>
    <view class="add-rule flex-row  center" @click="addRule" v-if="subType === 2">
      <u-icon name="plus-circle" color="#37B874" size="20"></u-icon>
      <view style="margin-left: 12px">抽取试题</view>
    </view>
    <view class="line" style="height: 10px" v-if="subType === 2"></view>
    <TopicList :list="topicList" @remove="remove" @moveUp="moveUp" @moveDown="moveDown" :columnName="columnName"
      v-if="subType === 2"></TopicList>
    <u-action-sheet safeAreaInsetBottom :show="topicTypeShow" :actions="topicTypes" title="试题类型"
      @close="topicTypeShow = false" @select="topicTypeSelect">
    </u-action-sheet>

    <u-action-sheet safeAreaInsetBottom :show="extractionShow" :actions="extractionTypes" title="抽题方式"
      @close="extractionShow = false" @select="extractionTypeSelect">
    </u-action-sheet>

  </view>
</template>
<script>
import Navbar from "@/improve/components/Navbar.vue";
import TopicList from "./TopicList.vue";
import { mapDictCodes } from "@/services/ServerService";
import { extractionTypes } from "@/improve/components/enum";

export default {
  name: "OnLineSubjectRule",
  components: { TopicList, Navbar },
  inject: ['prop_practice', "pro_practiceType"],
  props: {
    subType: {
      type: Number,
    },
    questionList: {
      type: Array,
      default: () => []
    }
  },
  computed: {
    detail() {
      return this.prop_practice()
    },
    columnName() {
      if (this.jsonData.extractionType === 1) {
        return "比列"
      }
      if (this.jsonData.extractionType === 2) {
        return "数量"
      }
      return "比列"
    }
  },
  data() {
    return {
      topicTypeShow: false,
      topicTypes: [],
      extractionTypes,
      extractionShow: false,
      jsonData: {
        type: 0,//题目类型
        topicTypeLabel: "",
        extractionType: null,//抽题方式
        extractionTypeLabel: null,
        amountStr: null,
      },
      topicList: []
    }
  },
  created() {
    this.getMapDictCodes("allQuestionType")
    if (this.detail) {
      this.jsonData.amountStr = this.detail.amountStr
      this.jsonData.extractionType = this.detail.type
      this.jsonData.extractionTypeLabel = extractionTypes.find(i => i.value === this.detail.type)?.name
      this.topicList = this.subType === this.detail.pattern ? this.detail.exQuestionList : []
    }
  },
  methods: {
    getMapDictCodes(key) {
      mapDictCodes(key).then(res => {
        if (key === "allQuestionType") {
          this.topicTypes = res.allQuestionType.map((item) => {
            item.name = item.label;
            return item
          })
        }
      })
    },
    topicTypeSelect(item) {
      this.jsonData.type = item.value
      this.jsonData.topicTypeLabel = item.name
    },
    extractionTypeSelect(item) {
      console.log(item)
      if (item.value === this.jsonData.extractionType) {
        return
      }
      this.jsonData.extractionType = item.value
      this.jsonData.extractionTypeLabel = item.name
      this.jsonData.amountStr = null
      this.topicList = []
      if (this.subType !== 2) {
        this.$emit("updateTopicList", { type: this.jsonData.extractionType, amountStr: this.jsonData.amountStr });
      }
    },
    hideKeyboard() {
      uni.hideKeyboard()
    },
    addRule() {
      if (!this.jsonData.extractionTypeLabel) {
        this.showToast('请选择抽题方式')
        return;
      }
      if (!this.jsonData.topicTypeLabel && this.subType === 2) {
        this.showToast('请选择试题类型')
        return;
      }
      if (!this.jsonData.amountStr) {
        this.showToast('请填写抽题比列')
        return;
      }
      const data = JSON.parse(JSON.stringify(this.jsonData));
      this.topicList.push({ ...data, num: data.amountStr })
      this.emitVal()
      //清空
      this.jsonData.type = null;
      this.jsonData.amountStr = null
      this.jsonData.topicTypeLabel = null
    },
    remove(index) {
      this.topicList.splice(index, 1);
      this.emitVal()
    },
    // 上移一位
    moveUp(index) {
      if (index > 0 && index < this.topicList.length) {
        const data = JSON.parse(JSON.stringify(this.topicList[index]));
        const nextData = JSON.parse(JSON.stringify(this.topicList[index - 1]));

        this.$set(this.topicList, index - 1, data); //
        this.$set(this.topicList, index, nextData); // 使用 Vue.set
        this.emitVal()
      }
    },
    //下移一位
    moveDown(index) {
      if (index >= 0 && index < this.topicList.length - 1) {
        const data = JSON.parse(JSON.stringify(this.topicList[index]));
        const nextData = JSON.parse(JSON.stringify(this.topicList[index + 1]));
        this.$set(this.topicList, index + 1, data);
        this.$set(this.topicList, index, nextData);
        this.emitVal()
      }
    },
    emitVal() {
      this.$emit("updateTopicList", this.topicList);
    },
    //平均抽题、整体抽题  没有添加按钮，检测输入值
    scoreChange(value) {
      if (this.subType !== 2 && !!value) {
        this.$emit("updateTopicList", { type: this.jsonData.extractionType, amountStr: this.jsonData.amountStr });
      }
    },
    showToast(msg) {
      uni.showToast({
        title: msg,
        icon: "none",
        duration: 2000
      });
    },
  },
}
</script>
<style scoped lang="scss">
.SubjectRule {

  .add-rule {
    background-color: #FFFFFF;
    padding: 29rpx;
  }

  .step-navbar {
    margin-top: 20rpx;
    background: white;
    display: flex;
    padding: 50rpx 32rpx 20rpx 32rpx;
    border-top-left-radius: 24rpx;
    border-top-right-radius: 24rpx;
  }


  .step-form {
    margin-top: 6rpx;
    background-color: white;

    .select-wr {
      .line {
        margin: 0 6px;
        width: 10px;
        height: 2px;
        background-color: #000000;
        border-radius: 10px;
      }

      .select-item {
        width: 90px;
        height: 40px;
        background-color: #F9F9F9;
        border-radius: 10px;
        padding-right: 12rpx;

        image {
          width: 14rpx;
          height: 14rpx;
          margin-left: 6px;
        }
      }
    }

  }
}
</style>